<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Web H5 接入海康录像机 (rtsp转flv) | 仲灏小栈</title>
    <meta name="generator" content="VuePress 1.8.0">
    <link rel="icon" href="/img/favicon.ico">
    <meta name="description" content="专注web全栈学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    <meta name="baidu-site-verification" content="code-5CGlqw1B4p">
    <meta name="google-site-verification" content="PbO8RiLRwDnNwqNFNGnaxZnEFB3CqcGMCGoloYfQXV0">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/assets/css/0.styles.15972595.css" as="style"><link rel="preload" href="/assets/js/app.6e09c0e4.js" as="script"><link rel="preload" href="/assets/js/2.26fadcea.js" as="script"><link rel="preload" href="/assets/js/21.c1d6f733.js" as="script"><link rel="prefetch" href="/assets/js/10.29078de5.js"><link rel="prefetch" href="/assets/js/100.1775343f.js"><link rel="prefetch" href="/assets/js/101.03c2a233.js"><link rel="prefetch" href="/assets/js/102.2d566277.js"><link rel="prefetch" href="/assets/js/103.28f0aae6.js"><link rel="prefetch" href="/assets/js/104.98d074e6.js"><link rel="prefetch" href="/assets/js/105.a113c54b.js"><link rel="prefetch" href="/assets/js/106.fe975924.js"><link rel="prefetch" href="/assets/js/107.06b48459.js"><link rel="prefetch" href="/assets/js/108.650cfa65.js"><link rel="prefetch" href="/assets/js/109.8dea05a5.js"><link rel="prefetch" href="/assets/js/11.0ffc15c2.js"><link rel="prefetch" href="/assets/js/110.f426e949.js"><link rel="prefetch" href="/assets/js/111.cb0ff462.js"><link rel="prefetch" href="/assets/js/112.2234a7ce.js"><link rel="prefetch" href="/assets/js/113.d42a4afb.js"><link rel="prefetch" href="/assets/js/114.afa6c93d.js"><link rel="prefetch" href="/assets/js/115.e74e58c4.js"><link rel="prefetch" href="/assets/js/116.b52912dc.js"><link rel="prefetch" href="/assets/js/117.f5e176df.js"><link rel="prefetch" href="/assets/js/118.428fdb24.js"><link rel="prefetch" href="/assets/js/119.c7b3c702.js"><link rel="prefetch" href="/assets/js/12.5358dc27.js"><link rel="prefetch" href="/assets/js/120.b28cb8e3.js"><link rel="prefetch" href="/assets/js/121.517216d1.js"><link rel="prefetch" href="/assets/js/122.224b318f.js"><link rel="prefetch" href="/assets/js/123.04e6a56c.js"><link rel="prefetch" href="/assets/js/13.1eb6db46.js"><link rel="prefetch" href="/assets/js/14.2d919975.js"><link rel="prefetch" href="/assets/js/15.351e3a4c.js"><link rel="prefetch" href="/assets/js/16.3acd2d41.js"><link rel="prefetch" href="/assets/js/17.60b03995.js"><link rel="prefetch" href="/assets/js/18.c6ad362d.js"><link rel="prefetch" href="/assets/js/19.8ab677ff.js"><link rel="prefetch" href="/assets/js/20.99f99fea.js"><link rel="prefetch" href="/assets/js/22.6f0b0c91.js"><link rel="prefetch" href="/assets/js/23.13368cdd.js"><link rel="prefetch" href="/assets/js/24.c53a9ca6.js"><link rel="prefetch" href="/assets/js/25.cd4407c5.js"><link rel="prefetch" href="/assets/js/26.d9b2ef17.js"><link rel="prefetch" href="/assets/js/27.16352eff.js"><link rel="prefetch" href="/assets/js/28.a62c7d25.js"><link rel="prefetch" href="/assets/js/29.635009f5.js"><link rel="prefetch" href="/assets/js/3.72d46b47.js"><link rel="prefetch" href="/assets/js/30.db885055.js"><link rel="prefetch" href="/assets/js/31.aa8c6cb9.js"><link rel="prefetch" href="/assets/js/32.e63d710c.js"><link rel="prefetch" href="/assets/js/33.4f69bb69.js"><link rel="prefetch" href="/assets/js/34.9d242b1d.js"><link rel="prefetch" href="/assets/js/35.24c7045d.js"><link rel="prefetch" href="/assets/js/36.2988cd72.js"><link rel="prefetch" href="/assets/js/37.05bf63d5.js"><link rel="prefetch" href="/assets/js/38.ecef1ea2.js"><link rel="prefetch" href="/assets/js/39.0fde8ff2.js"><link rel="prefetch" href="/assets/js/4.d95386e0.js"><link rel="prefetch" href="/assets/js/40.99489203.js"><link rel="prefetch" href="/assets/js/41.928918ed.js"><link rel="prefetch" href="/assets/js/42.8ff04c77.js"><link rel="prefetch" href="/assets/js/43.347198e5.js"><link rel="prefetch" href="/assets/js/44.fc4d4540.js"><link rel="prefetch" href="/assets/js/45.5e4eff92.js"><link rel="prefetch" href="/assets/js/46.83a0c228.js"><link rel="prefetch" href="/assets/js/47.37c2f407.js"><link rel="prefetch" href="/assets/js/48.bada4ddc.js"><link rel="prefetch" href="/assets/js/49.562d8b65.js"><link rel="prefetch" href="/assets/js/5.77e36999.js"><link rel="prefetch" href="/assets/js/50.338be56f.js"><link rel="prefetch" href="/assets/js/51.999e3de3.js"><link rel="prefetch" href="/assets/js/52.11309761.js"><link rel="prefetch" href="/assets/js/53.ea6a0c8a.js"><link rel="prefetch" href="/assets/js/54.a49ee06c.js"><link rel="prefetch" href="/assets/js/55.d4d985f2.js"><link rel="prefetch" href="/assets/js/56.258972e6.js"><link rel="prefetch" href="/assets/js/57.e7d3b5af.js"><link rel="prefetch" href="/assets/js/58.50c14a49.js"><link rel="prefetch" href="/assets/js/59.8edb599b.js"><link rel="prefetch" href="/assets/js/6.ba658368.js"><link rel="prefetch" href="/assets/js/60.d1250584.js"><link rel="prefetch" href="/assets/js/61.28187287.js"><link rel="prefetch" href="/assets/js/62.1cb42759.js"><link rel="prefetch" href="/assets/js/63.3fd80d10.js"><link rel="prefetch" href="/assets/js/64.9f43af49.js"><link rel="prefetch" href="/assets/js/65.c4a47594.js"><link rel="prefetch" href="/assets/js/66.cd22b5d7.js"><link rel="prefetch" href="/assets/js/67.5c9918c9.js"><link rel="prefetch" href="/assets/js/68.fb876377.js"><link rel="prefetch" href="/assets/js/69.3414f481.js"><link rel="prefetch" href="/assets/js/7.83e78719.js"><link rel="prefetch" href="/assets/js/70.f003a000.js"><link rel="prefetch" href="/assets/js/71.39859d24.js"><link rel="prefetch" href="/assets/js/72.12912986.js"><link rel="prefetch" href="/assets/js/73.abd327ea.js"><link rel="prefetch" href="/assets/js/74.36cb7d1d.js"><link rel="prefetch" href="/assets/js/75.1cb96b9a.js"><link rel="prefetch" href="/assets/js/76.6033c6da.js"><link rel="prefetch" href="/assets/js/77.083624e2.js"><link rel="prefetch" href="/assets/js/78.70d3273c.js"><link rel="prefetch" href="/assets/js/79.14f3aecd.js"><link rel="prefetch" href="/assets/js/8.bcb11f96.js"><link rel="prefetch" href="/assets/js/80.95205bda.js"><link rel="prefetch" href="/assets/js/81.a39e63f0.js"><link rel="prefetch" href="/assets/js/82.6298e8dc.js"><link rel="prefetch" href="/assets/js/83.109c5547.js"><link rel="prefetch" href="/assets/js/84.6a1959a1.js"><link rel="prefetch" href="/assets/js/85.6ff6f61a.js"><link rel="prefetch" href="/assets/js/86.7d2bfbe7.js"><link rel="prefetch" href="/assets/js/87.2032d6ae.js"><link rel="prefetch" href="/assets/js/88.5cda9aa6.js"><link rel="prefetch" href="/assets/js/89.60c9e091.js"><link rel="prefetch" href="/assets/js/9.170a94b1.js"><link rel="prefetch" href="/assets/js/90.0dab9f57.js"><link rel="prefetch" href="/assets/js/91.ecf75d5a.js"><link rel="prefetch" href="/assets/js/92.74397fcb.js"><link rel="prefetch" href="/assets/js/93.f5559b26.js"><link rel="prefetch" href="/assets/js/94.27c65783.js"><link rel="prefetch" href="/assets/js/95.ea55ba1f.js"><link rel="prefetch" href="/assets/js/96.8a68510f.js"><link rel="prefetch" href="/assets/js/97.ef520b02.js"><link rel="prefetch" href="/assets/js/98.d4a41570.js"><link rel="prefetch" href="/assets/js/99.bdd726ad.js">
    <link rel="stylesheet" href="/assets/css/0.styles.15972595.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu have-body-img"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/logo.png" alt="仲灏小栈" class="logo"> <span class="site-name can-hide">仲灏小栈</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/web/" class="nav-link">大前端</a></div><div class="nav-item"><a href="/backend-opt/" class="nav-link">后端&amp;运维</a></div><div class="nav-item"><a href="/other-tech/" class="nav-link">其他</a></div><div class="nav-item"><a href="/tech-live/" class="nav-link">生活</a></div><div class="nav-item"><a href="/about/" class="nav-link">关于我</a></div><div class="nav-item"><a href="/favorite/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/izhaong" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="https://cdn.jsdelivr.net/gh/izhaong/izhaong.com-oss/site-data/avatar/avatar-wx.jpg"> <div class="blogger-info"><h3>仲灏</h3> <span>诚意, 正心, 格物, 致知</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/web/" class="nav-link">大前端</a></div><div class="nav-item"><a href="/backend-opt/" class="nav-link">后端&amp;运维</a></div><div class="nav-item"><a href="/other-tech/" class="nav-link">其他</a></div><div class="nav-item"><a href="/tech-live/" class="nav-link">生活</a></div><div class="nav-item"><a href="/about/" class="nav-link">关于我</a></div><div class="nav-item"><a href="/favorite/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/izhaong" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>JavaScript</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/a31c06/" class="sidebar-link">缓缓滚动到顶部实现方式</a></li><li><a href="/pages/9ee936/" class="sidebar-link">js 精准和模糊获取dom</a></li><li><a href="/pages/c466bf/" class="sidebar-link">iframe 笔记</a></li><li><a href="/pages/b3a05e/" class="sidebar-link">文件上传安全问题</a></li><li><a href="/pages/ea13c1/" aria-current="page" class="active sidebar-link">Web H5 接入海康录像机 (rtsp转flv)</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/ea13c1/#最终效果" class="sidebar-link">最终效果</a></li><li class="sidebar-sub-header"><a href="/pages/ea13c1/#私网映射为公网" class="sidebar-link">私网映射为公网</a></li><li class="sidebar-sub-header"><a href="/pages/ea13c1/#搭建转流服务器-rtsp-rtmp" class="sidebar-link">搭建转流服务器(RTSP =&gt; RTMP)</a></li><li class="sidebar-sub-header"><a href="/pages/ea13c1/#服务端相关命令" class="sidebar-link">服务端相关命令</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/ea13c1/#添加视频流" class="sidebar-link">添加视频流</a></li></ul></li><li class="sidebar-sub-header"><a href="/pages/ea13c1/#前端对接" class="sidebar-link">前端对接</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/ea13c1/#说明事项-最终转流为flv格式" class="sidebar-link">说明事项(最终转流为flv格式)</a></li><li class="sidebar-sub-header"><a href="/pages/ea13c1/#vue-接入" class="sidebar-link">Vue 接入</a></li></ul></li></ul></li><li><a href="/pages/9bf063/" class="sidebar-link">全局数据</a></li><li><a href="/pages/b035dd/" class="sidebar-link">持久化数据</a></li><li><a href="/pages/a13649/" class="sidebar-link">typescript学习笔记</a></li><li><a href="/pages/963e31/" class="sidebar-link">type</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Node</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Vue</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>React</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>小程序</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>跨端</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Electron</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>浏览器</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>其他</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-0c557b5e><div class="articleInfo" data-v-0c557b5e><ul class="breadcrumbs" data-v-0c557b5e><li data-v-0c557b5e><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-0c557b5e></a></li> <li data-v-0c557b5e><a href="/web/#大前端" data-v-0c557b5e>大前端</a></li><li data-v-0c557b5e><a href="/web/#JavaScript" data-v-0c557b5e>JavaScript</a></li></ul> <div class="info" data-v-0c557b5e><div title="作者" class="author iconfont icon-touxiang" data-v-0c557b5e><a href="https://github.com/izhaong" target="_blank" title="作者" class="beLink" data-v-0c557b5e>仲灏</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-0c557b5e><a href="javascript:;" data-v-0c557b5e>2021-12-24</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-content"></div></div></div> <h1><img src="">Web H5 接入海康录像机 (rtsp转flv)<!----></h1> <!----> <div class="theme-vdoing-content content__default"><h2 id="最终效果"><a href="#最终效果" class="header-anchor">#</a> 最终效果</h2> <p><img src="https://cdn.jsdelivr.net/gh/izhaong/izhaong.com-oss/blogImg/012010./2021/12/24/18-04-03-582c92fef9a63d6287f1adb5d1c74c6a-1607916733899-2650e9cd-72aa-470e-aa2b-498bfb4adcb1-0c6c0b.png" alt="img"></p> <p><em>开始了~</em></p> <h2 id="私网映射为公网"><a href="#私网映射为公网" class="header-anchor">#</a> 私网映射为公网</h2> <ul><li>如果你需要非局域网内访问就需要做这一步</li> <li>映射好公网后 ip 可能会变动 建议用域名做动态映射</li></ul> <p><img src="/Users/izhaong/izhaong/Blog/izhaong.com-localFile/012010./1607913390851-87025413-9540-4311-aba9-3751c62aeb91.png" alt="img"></p> <h2 id="搭建转流服务器-rtsp-rtmp"><a href="#搭建转流服务器-rtsp-rtmp" class="header-anchor">#</a> 搭建转流服务器(RTSP =&gt; RTMP)</h2> <ul><li>可参考其他方法</li></ul> <p><a href="https://blog.csdn.net/u012492535/article/details/79220398" target="_blank" rel="noopener noreferrer">通过FFmpeg将rtsp流摄像头视频转码为rtmp播放<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> https://blog.csdn.net/u012492535/article/details/79220398</p> <ul><li><p>我用的现成的<code>docker</code>镜像部署的服务 原理一样的</p></li> <li><ul><li>GitHub地址: https://github.com/ossrs/srs</li> <li>搭建好后就可以通过服务器地址:8380默认端口 查看了</li></ul></li> <li><ul><li><img src="https://cdn.jsdelivr.net/gh/izhaong/izhaong.com-oss/blogImg/abnerworks.Typora/2021/12/24/18-05-45-aacb015387d441e46b225d6e028e41ae-18-04-56-aacb015387d441e46b225d6e028e41ae-1607916374134-85577282-4cc9-4b57-a4fd-acb7c6334b35-bec2f8-86a58a.png" alt="img"></li></ul></li></ul> <h2 id="服务端相关命令"><a href="#服务端相关命令" class="header-anchor">#</a> 服务端相关命令</h2> <h3 id="添加视频流"><a href="#添加视频流" class="header-anchor">#</a> 添加视频流</h3> <p><strong>直播</strong></p> <ul><li>在容器外执行srs容器内的命令</li></ul> <div class="language- line-numbers-mode"><pre class="language-text"><code>docker exec -it ${你的srs容器地址} /bin/bash -c ffmpeg -rtsp_transport tcp -i rtsp://${账号:密码}@${映射为公网的ip或者域名地址ztzyjc.3322.org}:${端口 默认9002}/Streaming/channels/${你的摄像头通道地址}0${主流1 子流2}  -c:v libx264 -crf 300 -acodec aac -f flv rtmp://127.0.0.1:1935/live/mystream${地址要不一样的, 我的是通道地址}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>以我的地址为例: 在9.20的服务器上部署的srs 命令为</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>docker exec e5e1135e7cf6 /bin/bash -c 'ffmpeg -rtsp_transport tcp -i rtsp://admin:******@www.***.com:9002/Streaming/channels/2001  -c:v libx264  -acodec aac -f flv rtmp://127.0.0.1:1935/live/mystream20'
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li>这样前端就能通过地址<code>rtmp://192.168.9.20:8380/live/mystream20</code> 或者 <code>http://192.168.9.20:8380/live/mystream20</code></li></ul> <p><strong>回放</strong></p> <ul><li><p>命令<code>docker exec e5e1135e7cf6 /bin/bash -c 'ffmpeg -rtsp_transport tcp -i &quot;rtsp://admin:******@www.***.com:9002/Streaming/tracks/2001?starttime=20201214t000000z&amp;endtime=20201214t000000z&quot; -c copy -f flv rtmp://127.0.0.1:1935/live/mytrack20201214t000000z'</code></p></li> <li><ul><li>相应的前端播放地址: <code>http://192.168.9.20:8380/live/mytrack20201214t000000z</code></li></ul></li></ul> <h2 id="前端对接"><a href="#前端对接" class="header-anchor">#</a> 前端对接</h2> <h3 id="说明事项-最终转流为flv格式"><a href="#说明事项-最终转流为flv格式" class="header-anchor">#</a> 说明事项(最终转流为flv格式)</h3> <ul><li><p><strong>RTMP</strong> <strong>需要 flash 插件播放(以下有说明)</strong>, chrome 在2020年12月后已经不再支持, 现在相关api接口都已经关闭了, 需要操作flash本身去调用浏览器相关接口(放弃了)</p></li> <li><ul><li>https://segmentfault.com/a/1190000018582436</li> <li>RTMP(Real Time Messaging Protocol)实时消息传送协议是Adobe Systems公司为Flash播放器和服务器之间音频、视频和数据传输开发的私有协议。</li></ul></li> <li><ul><li>RTMP是一个应用层协议，有多路复用的特点，传输内容有视频、音频、控制命令</li> <li>RTMP 在音视频相关的协议中，它的突出特点是：连接可靠、低延时</li></ul></li> <li><p>使用flv</p></li> <li><ul><li>视频加载快比hls的m3u8格式快得多(可能是个人情况,未作深究)</li></ul></li> <li><p>前端添加设备需要写服务端cmd脚本, 我这边也是使用的 nodejs 的express搭建了权限校验和docker的添加视频流命令</p></li> <li><ul><li>附上地址: https://gitee.com/Izhaong/node-srs-cmd</li></ul></li></ul> <h3 id="vue-接入"><a href="#vue-接入" class="header-anchor">#</a> Vue 接入</h3> <p><strong>我使用了</strong> <code>**Dplayer**</code><strong>播放器,</strong> 附上链接: http://dplayer.js.org/zh/guide.html#flv</p> <ol><li><p><code>public/index.js</code>引入<code>&lt;script src=&quot;https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js&quot;&gt;&lt;/script&gt;</code></p></li> <li><ol><li>可以使用其他的cdn</li></ol></li> <li><p>cmd 运行<code>cnpm i dplayer -S</code></p></li> <li><p>视频加载页面(单个视频)</p></li></ol> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code>...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dplayer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
...

import DPlayer from 'dplayer'

data: { dp: undefined }
mounted() { this.initPlayer() }
methods: {
	initPlayer() {
		this.$nextTick(() =&gt; {
        const liveBaseUrl = 'http://192.168.9.20:8380' // 你的srs服务地址
        // const url = live ? `${liveBaseUrl}/live/mystream${channelNo}.flv` : `${liveBaseUrl}/live/mytrack${this.datetimeValue[0]}.flv` // 回放后面再说
        const url = `${liveBaseUrl}/live/mystream${channelNo}.flv` // 直播地址
        // 测试flx地址: https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv
        this.dp = new DPlayer({
          container: document.getElementById('dplayer'),
          video: {
            url,
            type: 'flv'
          },
          // mutex: false, // api自己查查 不描述了 
          autoplay: true,
          live
        })
      })
  }
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><p>a. 多个视频自己琢磨吧~我给个大概思路, 数组嘛~简单 如下循环就好了</p> <p><img src="https://cdn.jsdelivr.net/gh/izhaong/izhaong.com-oss/blogImg/abnerworks.Typora/2021/12/24/18-05-54-224aaac6189cd90c2f64c89f27fe980f-18-05-06-224aaac6189cd90c2f64c89f27fe980f-1607915827688-dbc24549-742d-4b82-8e8d-8bee8ae07de4-fe1058-63a239.png" alt="img"></p> <p><em>到此应该就差不多了, 肯定还有很多遗漏 不想写了 累~</em></p></div></div> <!----> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2021/12/30, 13:46:48</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/b3a05e/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">文件上传安全问题</div></a> <a href="/pages/9bf063/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">全局数据</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/b3a05e/" class="prev">文件上传安全问题</a></span> <span class="next"><a href="/pages/9bf063/">全局数据</a>→
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/486e07/"><div>
            Git Hooks
            <!----></div></a> <span class="date">02-24</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/f041f4/"><div>
            标准化编程规范解决方案
            <!----></div></a> <span class="date">02-24</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/2b68bd/"><div>
            git 提交信息规范
            <!----></div></a> <span class="date">02-24</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="mailto:izhaong@outlook.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/izhaong" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://music.163.com/#/playlist?id=755597173" title="听音乐" target="_blank" class="iconfont icon-erji"></a></div> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2021-2022
    <span>izhaong | <a href="https://github.com/izhaong" target="_blank">github</a> | <a href="http://beian.miit.gov.cn/" target="_blank">蜀ICP备2021031194号</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <div class="body-bg" style="background:url() center center / cover no-repeat;opacity:0.5;"></div> <!----> <!----></div><div class="global-ui"><div></div></div></div>
    <script src="/assets/js/app.6e09c0e4.js" defer></script><script src="/assets/js/2.26fadcea.js" defer></script><script src="/assets/js/21.c1d6f733.js" defer></script>
  </body>
</html>
